<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="400" height="500"></canvas>
</body>
</html>

<style type="text/css">
	#mycanvas{border: 1px solid #000000;}
</style>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext("2d");
	context.beginPath();
	// rgb范围 0~255
	context.fillStyle = "rgba(255,0,0,0.5)";
	context.arc(80,80,60,0,2*Math.PI);
	context.fill()
	// context.closePath()
	// context.beginPath()
	// 起始坐标（2），半径，起始角，技术角
	// context.arc(80,160,60,0,3*Math.PI/2);
	context.stroke()
</script>